// 导入React核心功能和相关hooks
import React, { useState, useRef, useEffect } from 'react'
// 导入当前组件的样式文件
import styles from './CreateExam..module.scss'
// 导入表单步骤组件 - 用于填写考试基本信息
import FormStep from './components/formStep/FormStep'
// 导入表格步骤组件 - 用于选择考试试卷
import TableStep from './components/tableStep/TableStep'
// 导入预览组件 - 用于预览考试信息
import PreView from './components/preView/PreView'
// 导入获取科目列表和监考人列表的API
import { getsubjects, getPaperof } from '@/services/index'
import { getExaminationApi } from '@/service/exam'
// 导入获取班级列表的API 
import { getClassList } from '@/service/index'
// 导入类型定义 - 科目列表、试卷列表和班级类型
import type { subjectslist, paperlist, ClassType } from '@/services/type'
// 导入试卷列表类型定义
import type { ExaminationItem } from '@/service/type'
import { Watermark } from 'antd'

/**
 * 定义考试表单数据结构接口
 * examName - 考试名称
 * 'range-time-picker' - 考试时间范围，包含开始和结束时间
 * subject - 选择的科目分类ID
 * proctor - 选择的监考人ID
 * class - 选择的考试班级ID
 */
interface FormData {
  examName: string
  'range-time-picker': [string, string]
  subject: string
  proctor: string
  class: string
}

// 创建考试主组件
const CreateExam: React.FC = () => {
  // 步骤状态管理: 1-填写表单 2-选择试卷 3-预览确认
  const [step, setStep] = useState(1)
  // 存储科目分类列表数据
  const [classifyList, setClassifyList] = useState<subjectslist[]>([])
  // 存储监考人列表数据
  const [proctorList, setProctorList] = useState<paperlist[]>([])
  // 存储学生班级列表数据
  const [studentList, setStudentList] = useState<ClassType[]>([])
  // 存储试卷列表数据
  const [examList, setExamList] = useState<ExaminationItem[]>([])

  // 表单数据状态，优先从localStorage读取已保存的数据
  const [formData, setFormData] = useState<ExaminationItem[]>(() => {
    const saved = localStorage.getItem('examFormData') // 从本地存储读取
    return saved ? JSON.parse(saved) : []  // 有数据则解析，否则使用空数组
  })


  // 异步获取科目分类列表
  const getClassifyList = async () => {
    try {
      const response = await getsubjects()  // 调用API获取科目
      setClassifyList(response.data.data.list)  // 更新科目列表状态
    } catch (e) {
      console.error('获取科目列表失败:', e)  // 错误处理
    }
  }

  // 异步获取监考人列表
  const getProctor = async () => {
    try {
      const response = await getPaperof()  // 调用API获取监考人
      setProctorList(response.data.data.list)  // 更新监考人列表状态
    } catch (e) {
      console.error('获取监考人列表失败:', e)  // 错误处理
    }
  }

  // 异步获取学生班级列表
  const getStudentList = async () => {
    try {
      const response = await getClassList({page: 1, pagesize: 100})  // 调用API获取班级
      setStudentList(response.data.data.list)  // 更新班级列表状态
    } catch (e) {
      console.error('获取班级列表失败:', e)  // 错误处理
    }
  }
  
  // 异步获取试卷列表
  const getExam = async () => {
    try {
      const response = await getExaminationApi()  // 调用API获取考试
      setExamList(response.data.data.list)  // 更新考试列表状态
    } catch (e) {
      console.error('获取考试列表失败:', e)  // 错误处理
    }
  }


  // 组件挂载时执行，获取初始化数据
  useEffect(() => {
    getClassifyList()  // 获取科目列表
    getProctor()       // 获取监考人列表
    getStudentList()   // 获取班级列表
    getExam()
  }, [])  // 空依赖数组表示只在组件挂载时执行一次

  // 创建表单引用，用于访问表单实例
  const formRef = useRef<any>(null)

  /**
   * 切换步骤函数
   * @param value 步进值(1前进，-1后退)
   * @param data 可选，需要更新的表单数据
   */
  const changeStep = (value: number, data?: FormData | null) => {
    if (data !== undefined && data !== null) {
      console.log(examList)
      const obj = examList.filter(item => item.classify?._id === data.subject)
      console.log(obj)
      setFormData(obj)  // 更新表单数据为数组
    }
    setStep(step + value)  // 更新当前步骤
  }

  /**
   * 根据当前步骤渲染对应内容
   * @param step 当前步骤(1-3)
   * @returns 对应步骤的组件
   */
  const renderForm = (step: number) => {
    switch (step) {
      case 1:  // 第一步: 填写考试基本信息
        return (
          <FormStep
            changeStep={changeStep}    // 传递步骤切换函数
            formRef={formRef}          // 传递表单引用
            classifyList={classifyList} // 传递科目列表
            proctorList={proctorList}   // 传递监考人列表
            studentList={studentList}   // 传递班级列表
          />
        )
      case 2:  // 第二步: 选择考试试卷
        return (
          <TableStep
            changeStep={changeStep}    // 传递步骤切换函数
            subject={ formData } // 传递当前选择的科目
          />
        )
      default: // 第三步: 预览考试信息
        return (
          <PreView
            changeStep={changeStep}
            studentList={studentList}
            classifyList={classifyList}
            proctorList={proctorList}
          />  // 传递步骤切换函数
        )
    }
  }

  // 主组件渲染函数
  return (
    <div className={styles.createExam}>
      <h1>创建考试</h1>  {/* 页面标题 */}
      <div className={styles.content}>
        <Watermark content="zyj" font={{ fontSize: 30 }} gap={[200 ,200]}>
          {/* 步骤指示器 - 显示当前进度 */}
          <div className={styles.step}>
            {/* 第一步指示器 */}
            <div className={step === 1 ? styles.active : styles.finish}>
              {step > 1 ? '√' : 1}  {/* 已完成显示√，当前显示1 */}
            </div>
            <p className={step > 1 ? styles.finish : styles.line}></p>  {/* 连接线 */}

            {/* 第二步指示器 */}
            <div className={step < 2 ? styles.nomal : step === 2 ? styles.active : styles.finish}>
              {step > 2 ? '√' : 2}  {/* 已完成显示√，当前显示2 */}
            </div>
            <p className={step > 2 ? styles.finish : styles.line}></p>  {/* 连接线 */}

            {/* 第三步指示器 */}
            <div className={step < 3 ? styles.nomal : step === 3 ? styles.active : styles.finish}>
              {step > 3 ? '√' : 3}  {/* 已完成显示√，当前显示3 */}
            </div>
          </div>

          {/* 渲染当前步骤对应的表单内容 */}
          {renderForm(step)}
        </Watermark>
      </div>

    </div>
  )
}

// 默认导出CreateExam组件
export default CreateExam
